<template>
  <div class="accountDiv">
    <div class="accountMenu">
      <div class="menu-and-button-wrapper">
        <i class="cancel-button el-icon-arrow-left" type="text" @click="cancel"></i>
        <span class="title">{{ title }}</span>
        <i class="setting-button el-icon-plus" type="text" @click="cancel"></i>
      </div>
    </div>
    <div class="content">
      <div class="item-container">
        <el-table :data="itemList"
                  :show-header="false"
                  row-key="id"
        >
          <el-table-column prop="picture"
                           width="90">
            <template slot-scope="scope">
              <svg-icon :icon-file-name="scope.row.picture" class="typeIcon"></svg-icon>
            </template>
          </el-table-column>
          <el-table-column prop="name"></el-table-column>
          <el-table-column prop="move" width="50">
            <template>
              <img class="moveIcon" :src="moveIcon" data-drag-handle="true"/>
            </template>
          </el-table-column>
          <!-- 其他列 -->
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>

import router from "@/router";
import accountApi from "@/api/accountApi";
import Sortable from 'sortablejs'

export default {
  data() {
    return {
      title: "",
      type: "",
      itemList: [],
      moveIcon: require("@/assets/icons/otherIcon/move.png"),
    }
  },
  created() {
    if (this.$route.params.type === 'z') {
      this.type = "z";
      this.title = "支出";
    } else {
      this.title = "收入";
      this.type = "s";
    }
    this.handleNav(this.type);
  },
  mounted() {
    this.$nextTick(() => {
      const el = this.$el.querySelector('.el-table__body-wrapper tbody');
      var that = this;
      new Sortable(el, {
        onUpdate: function (event) {
          var newIndex = event.newIndex,
              oldIndex = event.oldIndex,
              $td = el.children[newIndex],
              $oldTd = el.children[oldIndex]
          el.removeChild($td);
          if (newIndex > oldIndex) {
            el.insertBefore($td, $oldTd);
          } else {
            el.insertBefore($td, $oldTd.nextSibling);
          }
          // 更新数组
          var item = that.itemList.splice(oldIndex, 1);
          that.itemList.splice(newIndex, 0, item[0]);
        },
        handle: '.moveIcon'
      })
    })
  },
  methods: {
    cancel() {
      this.saveBudgetSort();
      // 退出
      router.push({
        name: 'index',
        params: {show: true}
      });

    },
    saveBudgetSort() {
      var data = this.itemList.map(item => item.typeId).join(",");
      const userId = window.localStorage.getItem("userId");
      let param = {
        data: data,
        userId:userId,
        type:this.type
      }
      accountApi.saveBudgetSort(param).then((res) => {
        console.log(res)
        if (res.data.code !== 200) {
          this.$message({
            message: '修改保存失败',
            type: 'error'
          });
        }
      }).catch(()=> {
        this.$message({
          message: '修改保存失败',
          type: 'error'
        });
      })
    },
    handleNav(key) {
      const param = {
        type: key,
        userId:window.localStorage.getItem("userId")
      };
      accountApi.getBudgetType(param).then((res) => {
        if (res.data.code == 200) {
          this.itemList = res.data.data;
        }
      }).catch(() => {
        this.$message({
          message: '页面加载失败',
          type: 'error'
        });
      });
    },
  }
}
</script>

<style scoped>

.accountDiv {
  width: 100%;
  height: 100%;
  top: 0;
  position: fixed;
  left: 0;
}

.menu-and-button-wrapper {
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中（如果需要的话） */

}

.title {
  margin: auto auto;
}

.cancel-button {
  margin-left: 20px;
  font-size: 30px;
}

.setting-button {
  margin-right: 20px;
  font-size: 30px;
}

.content {
  padding-top: 80px; /* 留出头部的高度 */
  padding-bottom: 0px;
  overflow: auto;
  height: calc(100% - 80px);
}

el-table {
  width: 100%;
}

.moveIcon {
  width: 30px;
  height: 30px;
}
</style>